<template>
	<view>
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">普通话成绩</view>
		</cu-custom>
		<scroll-view scroll-x class="bg-red nav text-center margin-bottom-xl">
			<view :class="'cu-item ' + (index == TabCur ? 'text-white cur' : '')" @tap="tabSelect" :data-id="index"
				v-for="(item, index) in navbar" :key="item.key">
				{{ item }}
			</view>
		</scroll-view>
		<view v-if="TabCur == 0">
			<view class="cu-form-group margin-top">
				<view class="title">名字</view>
				<input :value="name" @input="inputName" placeholder="输入名字" />
			</view>
			<view class="cu-form-group">
				<view class="title">身份证</view>
				<input :value="idcard" @input="inputIdCard" placeholder="输入身份证号" />
			</view>

			<view class="margin-top-lg padding-xl">
				<button @tap="search" class="cu-btn block bg-orange lg">查询</button>
			</view>
		</view>

		<view v-if="TabCur == 1" class="cu-list menu">
			<view class="cu-item flex justify-between">
				<view class="content">
					<text class="text-black">姓名</text>
				</view>
				<view class="action">
					<text class="text-black">{{ name }}</text>
				</view>
			</view>
			<view class="cu-item flex justify-between">
				<view class="content">
					<text class="text-black">身份证号</text>
				</view>
				<view class="action">
					<text class="text-black">{{ idcard }}</text>
				</view>
			</view>
			<view class="cu-item flex justify-between">
				<view class="content">
					<text class="text-black">准考证号</text>
				</view>
				<view class="action">
					<text class="text-black">{{ zkzh }}</text>
				</view>
			</view>
			<view class="cu-item flex justify-between">
				<view class="content">
					<text class="text-black">出生日期</text>
				</view>
				<view class="action">
					<text class="text-black">{{ csrq }}</text>
				</view>
			</view>
			<view class="cu-item flex justify-between">
				<view class="content">
					<text class="text-black">考试时间</text>
				</view>
				<view class="action">
					<text class="text-black">{{ kssj }}</text>
				</view>
			</view>
			<view class="cu-item flex justify-between">
				<view class="content">
					<text class="text-black">最终分</text>
				</view>
				<view class="action">
					<text class="text-black">{{ zzf }}</text>
				</view>
			</view>
			<view class="cu-item flex justify-between">
				<view class="content">
					<text class="text-black">等级</text>
				</view>
				<view class="action">
					<text class="text-black">{{ dengji }}</text>
				</view>
			</view>
			<view class="cu-item flex justify-between">
				<view class="content">
					<text class="text-black">证书编号</text>
				</view>
				<view class="action">
					<text class="text-black">{{ zsbh }}</text>
				</view>
			</view>
			<view class="cu-item flex justify-between">
				<view class="content">
					<text class="text-black">省份</text>
				</view>
				<view class="action">
					<text class="text-black">{{ sf }}</text>
				</view>
			</view>
			<view class="cu-item flex justify-between">
				<view class="content">
					<text class="text-black">测试站点</text>
				</view>
				<view class="action">
					<text class="text-black">{{ cszd }}</text>
				</view>
			</view>
		</view>

		<view :class="'cu-modal ' + (alert == 'show' ? 'show' : '')">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示信息</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="">
					<view class="margin-bottom text-center padding text-center text-df">
						<text>查询失败</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		getPuTongHua
	} from '../../utils/extra/putonghua/getPuTongHua.js'
	export default {
		data() {
			return {
				CustomBar: app.globalData.CustomBar,
				navbar: ['信息输入', '查询结果'],
				TabCur: 0,
				name: '',
				idcard: '',
				zkzh: '',
				csrq: '',
				kssj: '',
				zzf: '',
				dengji: '',
				zsbh: '',
				sf: '',
				cszd: '',
				img: '',
				alert: ''
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			tabSelect(e) {
				this.setData({
					TabCur: e.currentTarget.dataset.id
				});
			},

			inputName(e) {
				this.setData({
					name: e.detail.value
				});
			},

			inputIdCard(e) {
				this.setData({
					idcard: e.detail.value
				});
			},

			async search() {
				let that = this;
				uni.showLoading({
					title: '正在获取中'
				});

				let res = await getPuTongHua(that.idcard, that.name)
				console.log(res)
				uni.hideLoading()
				if (res == null) {
					that.setData({
						alert: 'show'
					});
					return
				}

				uni.showToast({
					title: '获取成功'
				});
				
				that.setData({
					TabCur: 1,
					name: res[0],
					idcard: res[1],
					zkzh: res[2],
					csrq: res[3],
					kssj: res[4],
					zzf: res[5],
					dengji: res[6],
					zsbh: res[7],
					sf: res[8],
					cszd: res[9],
					img: res[10]
				});
			},

			hideModal() {
				this.setData({
					alert: ''
				});
			}
		}
	};
</script>
<style>
	@import './index.css';
</style>
